 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮 - 在线演示 - layui</title>
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="layui/css/global.css" media="all">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  


<div class="layui-header header header-demo" spring>
  <div class="layui-main">
    <a class="logo" href="/">
      <img src="layui/images/logo.png" alt="layui">
    </a>
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
    <ul class="layui-nav">
      <li class="layui-nav-item ">
        <a href="/doc/">文档<!-- <span class="layui-badge-dot"></span> --></a> 
      </li>
      <li class="layui-nav-item layui-this">
        <a href="/demo/">示例<!--  --></a>
      </li>
      
      
      
      
      <li class="layui-nav-item layui-hide-xs">
        <a href="//fly.layui.com/" target="_blank">社区</a>
      </li>
      
      <li class="layui-nav-item">
        <a href="javascript:;"><!--<span class="layui-badge-dot" style="margin: -5px 0 0 -15px;"></span>-->周边</a>
        <dl class="layui-nav-child">
          <dd lay-unselect>
            <a href="//fly.layui.com/extend/" target="_blank">扩展组件</a>
          </dd>
          <dd lay-unselect>
            <a href="//fly.layui.com/store/" target="_blank">模板市场 <span class="layui-badge-dot"></span></a>
            <hr>
          </dd>
          
          <dd class="layui-hide-sm layui-show-xs" lay-unselect>
            <a href="//fly.layui.com/" target="_blank">社区交流</a>
            <hr>
          </dd>
          <dd lay-unselect><a href="/admin/" target="_blank">后台模板</a></dd>
          <dd lay-unselect><a href="/layim/" target="_blank">即时聊天</a><hr></dd>
          
          <dd lay-unselect><a href="/alone.html" target="_blank" lay-unselect>独立组件</a></dd>
          <dd lay-unselect><a href="https://fly.layui.com/jie/24209/" target="_blank">Axure 组件</a></dd>
        </dl>
      </li>
      
      <li class="layui-nav-item layui-hide-xs" lay-unselect>
        <a href="/admin/">后台模板<span class="layui-badge-dot" style="margin-top: -5px;"></span></a>
      </li>
    </ul>
  </div>
</div>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> 
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      
<ul class="layui-nav layui-nav-tree site-demo-nav">
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">开发工具</a>
    <dl class="layui-nav-child">
      <dd>
        <a href="/demo/">调试预览</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">布局</a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="/demo/grid.html">栅格</a>
      </dd>
      <dd class="">
        <a href="/demo/admin.html">后台布局</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">基本元素</a>
    <dl class="layui-nav-child">
      <dd class="layui-this">
        <a href="/demo/button.html">按钮</a>
      </dd>
      <dd class="">
        <a href="/demo/form.html">表单</a>
      </dd>
      <dd class="">
        <a href="/demo/nav.html">导航/面包屑</a>
      </dd>
      <dd class="">
        <a href="/demo/tab.html">选项卡</a>
      </dd>
      <dd class="">
        <a href="/demo/progress.html">进度条</a>
      </dd>
      <dd class="">
        <a href="/demo/panel.html">面板</a>
      </dd>
      <dd class="">
        <a href="/demo/badge.html">徽章</a>
      </dd>
      <dd class="">
        <a href="/demo/timeline.html">时间线</a>
      </dd>
      <dd class="">
        <a href="/demo/table-element.html">静态表格</a>
      </dd>
      <dd class="">
        <a href="/demo/anim.html">动画</a>
      </dd>
      <dd class="">
        <a href="/demo/auxiliar.html">辅助元素</a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item layui-nav-itemed">
    <a class="javascript:;" href="javascript:;">组件示例</a>
    <dl class="layui-nav-child">
      <dd class="">
        <a href="/demo/layer.html">
          弹出层
        </a>
      </dd>
      <dd class="">
        <a href="/demo/laydate.html">
          日期与时间选择
        </a>
      </dd>
      <dd class="">
        <a href="/demo/layim.html">
          即时通讯
        </a>
      </dd>
      <dd class="">
        <a href="/demo/table.html">
          数据表格
        </a>
      </dd>
       <dd class="">
        <a href="/demo/laypage.html">
          分页
        </a>
      </dd>
      <dd class="">
        <a href="/demo/upload.html">
          文件上传
        </a>
      </dd>
      
      <dd class="">
        <a href="/demo/colorpicker.html">
          颜色选择器
        </a>
      </dd>
      <dd class="">
        <a href="/demo/slider.html">
          滑块
        </a>
      </dd>
      <dd class="">
        <a href="/demo/rate.html">
          评分
        </a>
      </dd>
      <dd class="">
        <a href="/demo/carousel.html">
          轮播
        </a>
      </dd>
      <dd class="">
        <a href="/demo/laytpl.html">
          模板引擎
        </a>
      </dd>
      <dd class="">
        <a href="/demo/flow.html">
          流加载
        </a>
      </dd>
      <dd class="">
        <a href="/demo/util.html">
          工具集
        </a>
      </dd>
      <dd class="">
        <a href="/demo/code.html">
          代码修饰器
        </a>
      </dd>
    </dl>
  </li>
  
  <li class="layui-nav-item" style="height: 30px; text-align: center"></li>
</ul>

    </div>
  </div>
  
  <div class="layui-tab layui-tab-brief" lay-filter="demoTitle">
    <ul class="layui-tab-title site-demo-title">
      <li class="layui-this">预览</li>
      <li>查看代码</li>
      <li>帮助</li>
    </ul>
    <div class="layui-body layui-tab-content site-demo site-demo-body">
        <!--  Content Start -->
        <div class="layui-row">

       <div class="layui-col-md6">
        <br>
        <table class="layui-hide" id="test" lay-filter="test"></table>
      </div>
      <div class="layui-col-md6">
<br>
        <form class="layui-form" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
              <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
              <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
              <select name="city" lay-verify="required">
                <option value=""></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
                <option value="4">杭州</option>
              </select>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
              <input type="checkbox" name="like[write]" title="写作">
              <input type="checkbox" name="like[read]" title="阅读" checked>
              <input type="checkbox" name="like[dai]" title="发呆">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
              <input type="checkbox" name="switch" lay-skin="switch">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
              <input type="radio" name="sex" value="男" title="男">
              <input type="radio" name="sex" value="女" title="女" checked>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
              <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </form>
      </div>
      </div>
        <!--  Content End -->
    </div>
  </div>
  <div class="layui-footer footer footer-demo">
  <div class="layui-main">
    <p>&copy; 2019 <a href="/">layui.com</a> MIT license</p>
    <p>
      <a href="http://fly.layui.com/case/2019/" target="_blank">案例</a>
      <a href="http://fly.layui.com/jie/3147/" target="_blank">支持</a>
      <!--<a href="javascript:;" site-event="contactInfo">联系</a>-->
      <a href="https://github.com/sentsin/layui/" target="_blank" rel="nofollow">GitHub</a>
      <a href="https://gitee.com/sentsin/layui" target="_blank" rel="nofollow">码云</a>
      <a href="http://fly.layui.com/jie/2461/" target="_blank">公众号</a>
      <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">赣ICP备13006272号-2</a>
    </p>
  </div>
</div>

<div class="site-tree-mobile layui-hide">
  <i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<script src="layui/jquery.js" charset="utf-8"></script>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>
<script>
  //Demo
  layui.use(['form','table','laydate'], function(){
    var laydate = layui.laydate;
    var form = layui.form;
    var table = layui.table;
    
    //监听提交
    form.on('submit(formDemo)', function(data){
      console.log(data.field);
      return false;
    });

    lay('.time').each(function(){
        laydate.render({
            elem:this,
            type:'datetime'
        });
    });
    // form.render()
    var ids = [10002,10005,10007];
    table.render({
    elem: '#test'
    ,toolbar: '#toolbarDemo'
    // ,url:'data.json'
    ,data:[{ "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0", "experience": 255, "logins": 24, "wealth": 82830700, "classify": "作家", "score": 57, "LAY_CHECKED": true }, { "id": 10001, "username": "user-1", "sex": "男", "city": "城市-1", "sign": "签名-1", "experience": 884, "logins": 58, "wealth": 64928690, "classify": "词人", "score": 27 }, { "id": 10002, "username": "user-2", "sex": "女", "city": "城市-2", "sign": "签名-2", "experience": 650, "logins": 77, "wealth": 6298078, "classify": "酱油", "score": 31 }, { "id": 10003, "username": "user-3", "sex": "女", "city": "城市-3", "sign": "签名-3", "experience": 362, "logins": 157, "wealth": 37117017, "classify": "诗人", "score": 68 }, { "id": 10004, "username": "user-4", "sex": "男", "city": "城市-4", "sign": "签名-4", "experience": 807, "logins": 51, "wealth": 76263262, "classify": "作家", "score": 6 }, { "id": 10005, "username": "user-5", "sex": "女", "city": "城市-5", "sign": "签名-5", "experience": 173, "logins": 68, "wealth": 60344147, "classify": "作家", "score": 87 }, { "id": 10006, "username": "user-6", "sex": "女", "city": "城市-6", "sign": "签名-6", "experience": 982, "logins": 37, "wealth": 57768166, "classify": "作家", "score": 34 }, { "id": 10007, "username": "user-7", "sex": "男", "city": "城市-7", "sign": "签名-7", "experience": 727, "logins": 150, "wealth": 82030578, "classify": "作家", "score": 28 }, { "id": 10008, "username": "user-8", "sex": "男", "city": "城市-8", "sign": "签名-8", "experience": 951, "logins": 133, "wealth": 16503371, "classify": "词人", "score": 14 }, { "id": 10009, "username": "user-9", "sex": "女", "city": "城市-9", "sign": "签名-9", "experience": 484, "logins": 25, "wealth": 86801934, "classify": "词人", "score": 75 }, { "id": 10003, "username": "user-3", "sex": "女", "city": "城市-3", "sign": "签名-3", "experience": 362, "logins": 157, "wealth": 37117017, "classify": "诗人", "score": 68 }, { "id": 10004, "username": "user-4", "sex": "男", "city": "城市-4", "sign": "签名-4", "experience": 807, "logins": 51, "wealth": 76263262, "classify": "作家", "score": 6 }, { "id": 10005, "username": "user-5", "sex": "女", "city": "城市-5", "sign": "签名-5", "experience": 173, "logins": 68, "wealth": 60344147, "classify": "作家", "score": 87 }, { "id": 10006, "username": "user-6", "sex": "女", "city": "城市-6", "sign": "签名-6", "experience": 982, "logins": 37, "wealth": 57768166, "classify": "作家", "score": 34 }, { "id": 10007, "username": "user-7", "sex": "男", "city": "城市-7", "sign": "签名-7", "experience": 727, "logins": 150, "wealth": 82030578, "classify": "作家", "score": 28 }, { "id": 10008, "username": "user-8", "sex": "男", "city": "城市-8", "sign": "签名-8", "experience": 951, "logins": 133, "wealth": 16503371, "classify": "词人", "score": 14 }, { "id": 10009, "username": "user-9", "sex": "女", "city": "城市-9", "sign": "签名-9", "experience": 484, "logins": 25, "wealth": 86801934, "classify": "词人", "score": 75 } ]
    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用户名'}
      ,{field:'sex', width:80, title: '性别', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
      ,{field:'experience', title: '积分', sort: true}
      ,{field:'score', title: '评分', sort: true}
      ,{field:'classify', title: '职业'}
      ,{field:'wealth', width:137, title: '财富', sort: true}
      ,{field:'wealth', width:137, title: '财富', sort: true}
      ,{type:'checkbox'}
    ]]
    ,page:true
    ,parseData:function(res){
      console.log(res);
      res.data.forEach(ele => {
        if(ids.includes(ele.id)){
          ele.LAY_CHECKED=true;
        }
      });
    }

  });


//工具栏事件
table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      break;
      case 'getCheckLength':
        var data = checkStatus.data;
        layer.msg('选中了：'+ data.length + ' 个');
      break;
      case 'isAll':
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      break;
    };
  });

//手机设备的简单适配
var treeMobile = $('.site-tree-mobile')
  ,shadeMobile = $('.site-mobile-shade')

  treeMobile.on('click', function(){
    $('body').addClass('site-mobile');
  });

  shadeMobile.on('click', function(){
    $('body').removeClass('site-mobile');
  });
  });



    $("ul.layui-nav").on('click','li.layui-nav-item',function(){
      sessionStorage.menu=$("ul.layui-nav").html();
    });
    window.onload=function(){
      if(sessionStorage.menu){
        $("ul.layui-nav").empty().append(sessionStorage.menu);
      }
    }
    
    // window.onbeforeunload=function(){ 
    //   sessionStorage.menu=$("ul.layui-nav").html();
    // }
    </script>
</div>
</body>
</html>